<template lang="html">
  <div class="">
     <Headbar :title='title'></Headbar>
     <div class="choice_top">
       <img src="http://appnh5.caissa.com.cn/images/contact_banner.png">
     </div>

     <div class="order-box">
        <ul>
           <li><p>联系方式</p></li>
           <li>
             <img src="http://appnh5.caissa.com.cn/images/detail_li13.png" alt="">
             <input v-model="user_name" type="text" name="" value="" placeholder="联系人姓名">
          </li>
          <li>
            <img src="http://appnh5.caissa.com.cn/images/detail_li14.png" alt="">
            <input v-model="user_phone" type="text" name="" value="" placeholder="联系人电话">
          </li>
          <li>
            <img src="http://appnh5.caissa.com.cn/images/detail_li18.png" alt="">
            <input v-model="user_email" type="text" name="" value="" placeholder="邮箱">
         </li>
         <li>
           <img src="http://appnh5.caissa.com.cn/images/detail_li19.png" alt="">
           <input v-model="user_wechat" type="text" name="" value="" placeholder="微信">
         </li>
         <li>
           <img src="http://appnh5.caissa.com.cn/images/detail_li02.png" alt="">
          <span @click="changeurl()" class="order_city">北京(点击切换地图)</span>
         </li>
        </ul>
     </div>

     <div class="order_tj">
        <Button @click="submit()" class="tj_btn" type="success" long>提交订单</Button>
        <ul>
           <li @click="changeurl2()">上一步</li>
           <li @click="ask()">电话咨询</li>
        </ul>
     </div>

     <div v-show="phone" class="order_phone_box">
        <div class="order_phone">
            <p>(010)6598 3666</p>
            <ul>
               <li @click="reset">取消</li>
               <li>呼叫</li>
            </ul>
       </div>
     </div>

  </div>
</template>

<script>
import Headbar from './head'
export default {
   data(){
      return{
         phone: false,
         user_name: '',
         user_phone: '',
         user_email: '',
         user_wechat: '',
         title: '凯撒旅游--个性定制服务'
      }
   },
   components:{
      Headbar
   },
   methods:{
      changeurl(){
         this.$router.push(
            {name: 'map'}
         )
      },
      changeurl2(){
         this.$router.push(
            {name: 'plan'}
         )
      },
      ask(){
         this.phone = true;
         console.log(1);
      },
      reset(){
         this.phone = false;
      },
      submit(){
         var phone = /^1[34578]\d{9}$/;
         var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
         if (this.user_name == '' ) {
            alert('请您填写联系人姓名以便我们及时为您提供服务');
         }else if(this.user_phone == '' || phone.test(this.user_phone) != true){
            alert('请填写正确的手机号');
         }else if(this.user_email == '' || email.test(this.user_email) != true){
            alert('请填写正确的邮箱');
         }else if(this.user_wechat == ''){
            alert('请填写微信号码以便我们及时为您提供服务');
         }else{
            this.$router.push({
               name: 'success'
            })
         }
      }
   }
}
</script>

<style lang="css">
.choice_top{
   width: 100%;
   height:6rem;
   background-color: #f9f9f9;
}
.choice_top img{
   width: 80%;
   height:50%;
   margin-top: 1.3rem;
}
.order-box ul{
   text-align: left;
}
.order-box ul li{
   width: 28rem;
   height:4rem;
   margin: 0 auto;
   margin-top: 0.3rem;
   border-bottom: 0.1rem solid #d6d4d5;
}
.order-box ul li p{
   font-size: 1.5rem;
   line-height: 4rem;
}
.order-box ul li img{
   width:1.5rem;
   height:1.5rem;
   margin-top: 1rem;
}
.order-box ul li input{
   width:20rem;
   height:3rem;
   margin-left: 1.5rem;
   border: none;
}
.order-box .order_city{
   margin-left: 1.5rem;
}
.order_tj{
   width:90%;
   margin: 0 auto;
   margin-top: 3rem;
}
.order_tj .tj_btn{
   height:4rem;
   font-size: 1.5rem;
   background-color: #00b0ec;
}
.order_tj ul{
   margin-top: 1rem;
   margin-left: 5.5rem;
}
.order_tj ul li{
   float: left;
   width: 8rem;
   height:1.8rem;
   margin: 0 auto;
   line-height: 1.8rem;
   color: #fe8630;
   font-size: 1.4rem;
   border-right: 0.1rem solid #fe8630;
}
.order_tj ul li:nth-of-type(2){
   border: none;
}
.order_phone_box{
   width:100%;
   height: 60rem;
   background-color: rgba(0,0,0,.1);
   margin-top: -50rem;
   position: relative;
}
.order_phone{
   width:25rem;
   height:10rem;
   background-color: #fff;
   border-radius: 1rem;
   position: absolute;
   top: 28rem;
   left:3rem;
}
.order_phone p{
   font-size: 2rem;
   margin-top: 2rem;
}
.order_phone ul{
   /*background-color: pink;*/
}
.order_phone ul li{
   float: left;
   width:50%;
   height:4rem;
   margin-top: 1rem;
   font-size: 2rem;
   color: #00b0ec;
   line-height: 4rem;
   border-top: 0.2rem solid #f5f5f5;
   border-right: 0.2rem solid #f5f5f5;
}

</style>
